<template>
  <div>
    <el-divider>选项</el-divider>
    <el-radio-group v-model="activeData.config.optionsType">
      <el-radio-button :label="0">
        静态数据
      </el-radio-button>
      <el-radio-button :label="1">
        动态数据
      </el-radio-button>
      <el-radio-button :label="2">
        字典数据
      </el-radio-button>
    </el-radio-group>

    <!-- 远程赋值配置 -->
    <div v-if="activeData.config.optionsType === 1">
      <el-input v-model="activeData.config.dynamicOptions.url" size="mini"
                placeholder="https://api.tduckcloud.com/xxx.json"
      >
        <template slot="prepend">
          接口url
        </template>
      </el-input>
      <el-input v-model="activeData.config.dynamicOptions.dataPath" size="mini" placeholder="data">
        <template slot="prepend">
          列表数据jsonPath
        </template>
      </el-input>
      <el-input v-model="activeData.config.dynamicOptions.valueField" size="mini" placeholder="value">
        <template slot="prepend">
          值字段
        </template>
      </el-input>
      <el-input v-model="activeData.config.dynamicOptions.labelField" size="mini" placeholder="label">
        <template slot="prepend">
          标签字段
        </template>
      </el-input>
    </div>
    <div v-if="activeData.config.optionsType === 0">
      <draggable
        :animation="340"
        :list="activeData.config.options"
        group="selectItem"
        handle=".option-drag"
      >
        <div
          v-for="(item, index) in activeData.config.options"
          :key="index"
          class="select-item"
        >
          <div class="select-line-icon option-drag">
            <i class="el-icon-s-operation" />
          </div>
          <el-input
            v-model="item.label"
            placeholder="选项名"
            size="small"
          />
          <div
            class="close-btn select-line-icon"
            @click="activeData.config.options.splice(index, 1)"
          >
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 20px;margin-bottom: 10px">
        <el-button
          icon="el-icon-circle-plus-outline"
          style="padding-bottom: 0"
          type="text"
          @click="addSelectItem"
        >
          添加选项
        </el-button>
        <el-button
          icon="el-icon-document-copy"
          style="padding-bottom: 0"
          type="text"
          @click="openBatchEditDialogHandle"
        >
          批量编辑
        </el-button>
        <el-button
          v-if="
            ['CHECKBOX', 'RADIO'].indexOf(
              activeData.typeId
            ) > -1
          "
          icon="el-icon-circle-plus-outline"
          style="padding-bottom: 0"
          type="text"
          @click="addSelectOtherItem"
        >
          添加其他
        </el-button>
      </div>
      <el-dialog
        title="批量编辑"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <span class="desc-text">每行对应一个选项</span>
        <el-input v-model="batchItemValue" type="textarea" :autosize="{ minRows: 20, maxRows: 5000}"
                  placeholder="选项1 选项2  选项3 "
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="batchEditSelectItems">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div v-if="activeData.config.optionsType === 2">
      <el-form-item label="字典选择" class="mt10">
        <el-select v-model="activeData.config.dictOptionType" placeholder="请选择字典">
          <el-option
            v-for="item in dictTypeList"
            :key="item.dictType"
            :label="item.dictName"
            :value="item.dictType"
          />
        </el-select>
      </el-form-item>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import draggable from 'vuedraggable'
import {optionselect} from "@/api/system/dict/type"

export default {
  name: 'ConfigItemOption',
  components: {
    draggable
  },
  props: ['activeData'],
  data() {
    return {
      batchItemValue: '',
      dialogVisible: false,
      dictTypeList: []
    }
  },
  created() {
    optionselect().then(res => {
      this.dictTypeList = res.data
    })
  },
  methods: {
    addSelectItem() {
      const value =  _.max(_.values(this.activeData.config.options.map(item => item.value))) + 1 
      this.activeData.config.options.push({
        label: '',
        value: value,
        isRandom:false,
      })
    },
    openBatchEditDialogHandle() {
      this.batchItemValue = _.join(this.activeData.config.options.map(item => item.label), '\n')
      this.dialogVisible = true
    },
    async batchEditSelectItems() {
      const arrStrs = this.batchItemValue
      const arr = arrStrs.split('\n')
      if (arr.length > 0) {
        const options = []
        for (let index = 0; index < arr.length; index++) {
          const element = arr[index]
          if (element) {
            options.push({
              label: element,
              isRandom:false,
              // value: index + 1
              value:new Date().getTime()+index,
            })
          }
        }
        this.activeData.config.options = options
        this.dialogVisible = false
      }
    },
    addSelectOtherItem() {
      const item = this.activeData.config.options.find(option => option.value === 0)
      if (item) {
        return
      }
      this.activeData.config.options.push({
        label: '其他',
        value: 0,
        isRandom:false,
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  align-items: center;

  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }

  & .el-input + .el-input {
    margin-left: 4px;
  }
}

.select-item + .select-item {
  margin-top: 4px;
}

.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}

.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}

.option-drag {
  cursor: move;
}
</style>
